# 第一阶段：使用 Node.js 镜像构建前端项目
# 使用 AS 关键字给这个阶段命名, 方便在第二阶段使用
FROM node:18.13.0 AS builder

# 设置工作目录, 后续的操作都在这个目录下进行
WORKDIR /usr/src/app

# 复制 package.json 和 package-lock.json 文件
COPY package*.json ./

# 安装依赖, 如果是pnpm 或 yarn, 则使用pnpm install 或 yarn install, 否则使用npm install
RUN npm install

# 第一个点表示构建上下文中的当前目录，也就是你运行 docker build 命令时的目录
# 第二个点表示 Docker 容器中的工作目录 /usr/src/app
# COPY . . 的作用是将当前目录（包括所有子目录和文件）中的内容复制到 Docker 容器的工作目录 /usr/src/app 中
COPY . .

# 构建项目
RUN npm run build

# 第二阶段：使用 Nginx 镜像提供静态文件服务
# 使用 Nginx 镜像
FROM nginx:latest

# 复制构建好的文件, 这个builder是第一阶段的名字, 也就是as builder
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口, 可以忽略这个, 因为nginx默认就是80端口
EXPOSE 80

# 启动 Nginx, 使用daemon off; 防止docker容器退出
CMD ["nginx", "-g", "daemon off;"]
